<template>
    <!-- 空数据 -->
    <div class="editor-gridline-nodata" :style="renderStyle" :name="(activePiece || {}).canvas_name" @click="openMedia()">
        <svg viewBox="0 0 86 86">
            <rect x="40" y="19" width="6" height="48" rx="3"></rect>
            <rect x="19" y="40" width="48" height="6" rx="3"></rect>
        </svg>
    </div>

</template>

<script>
import { mapGetters } from "vuex";
export default {

    computed: {
        ...mapGetters('designer', {
            activePiece: 'getActivePiece',
        }),

        // 渲染器
        renderStyle () {
            if (!this.activePiece) {
                return { display: 'none' }
            } else {
                let piece = this.activePiece;
                return {
                    width: 100 * piece.canvas_width / piece.outer_width + '%',
                    height: 100 * piece.canvas_height / piece.outer_height + '%',
                    left: 100 * piece.canvas_left / piece.outer_width + '%',
                    top: 100 * piece.canvas_top / piece.outer_height + '%',
                    transform: `rotate(${piece.canvas_rotate}deg)`,
                }
            }

        },
    },

    methods: {
        openMedia () {
            if (this.activePiece.type == 2) {
                this.$emit('global:DESIGN_OPEN_EMB_LABEL');
            } else {
                this.$emit('global:DESIGN_OPEN_MEDIA');
            }
        }
    }

};
</script>

<style lang="scss" scoped>
.editor-gridline-nodata {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 10px;
    pointer-events: all;
    z-index: 5;
    cursor: pointer;

    &::before {
        content: '';
        position: absolute;
        left: 1px;
        top: 1px;
        right: 1px;
        bottom: 1px;
        background: rgba(220, 246, 254, 0.9);
    }
    svg {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        max-height: 100%;
        width: 86px;
        height: 86px;
        fill: #5dd3fb;
        transition: all 0.1s;
    }

    &:hover svg {
        width: 110px;
        height: 110px;
    }

    &[name='Neck Label Inner']::before {
        background: rgba(220, 246, 254, 1);
    }
}
</style>
